@import '~@/dark_var.less';

.select-trade-content {
  display: flex;
  width: 100%;
  height: 328px;
  overflow: hidden;
  border: 1px solid var(--bd);
  border-radius: @border-radius-base;

  .left {
    border-right: 1px solid var(--bd);
    .ant-checkbox-wrapper {
      margin-top: 10px;
    }
  }

  .left,
  .right {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    padding: 16px 0;

    .trader-list {
      flex: 1;
      margin-top: 8px;
      padding: 0 16px;
      overflow-y: auto;

      .list-item {
        .name {
          color: var(--font-a85);
        }
        .info {
          margin-top: 6px;
          color: var(--font4);
          font-size: 12px;
          .str {
            margin-left: 4px;
          }
        }
        &:hover {
          .name {
            color: var(--font-primary);
          }
        }
      }
    }

    .list {
      flex: 1;
      margin-top: 8px;
      padding: 0 16px;
      overflow-y: auto;
      color: var(--font2);
      .check-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 28px;
        .anticon {
          cursor: pointer;
          transition: all ease 0.3s;
          &:hover {
            color: #ff4d4f;
          }
        }
      }
    }

    .search-box,
    .opt {
      padding: 0 16px;
    }

    .opt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 32px;
      font-size: 14px;

      .length {
        color: var(--font);
      }
      .clear {
        cursor: pointer;
        transition: all ease 0.3s;
        &:hover {
          color: #ff4d4f;
        }
      }
    }
  }
}
